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مقدمة الكتاب 


عزيزي الطالب 

تنبع أهمية البرمجة من كونها منهجًا للتفكير وأسلويًا علميًا وعمليًا في حل العديد من 
المشكلات في القرن الحادي والعشرين الذي يطلق علية العصر الرقمي» وكونها أداة لتطوير مفردات 
هذا العصر . 

ويعتمد المدخل الجديد لمنهج الكمبيوتر وتكنولوجيا المعلومات للصف الثاني الثانوي على 
تحقيق الأهداف العامة والأهداف الخاصة للمادة في ضوء وثيقة المنهج بما فيها من معايير ومؤشرات 
لهذا الصف» وذلك من خلال بناء المنهج على أساسيات المعرفة السابقة وتنمية مهارات التعلم الذاتي 
عن طريق تطبيق استراتيجية التعلم من خلال المشروعات» وهي إحدى الاستراتيجيات التريوية التي 
تنمي المهارات لدى المتعلمين عن طريق جمع المعلومات من مصادر متنوعة ومعالجتها واستخدامها 
في حل المشكلات من خلال عمل الفريق الواحد. 

ويتكون محتوى الكتاب الإلكتروني التفاعلي من عدة موضوعات تتكامل فيما بينها لتحقيق 
تلك الأهداف المرجوة» حيث يتناول الكتاب أريع موضوعات أساسية هي: إنشاء موقع ويب تفاعلي 
متكامل من خلال لغة الترميز ا1۲0 أو من خلال إحدى التطبيقات» وإنشاء قاعدة بيانات وريطها 
بالموقع بالإضافة لإجراء معالجة على البيانات التي يتم عرضها على صفحات الموقع وما يتبعه من 
تأثير في البيانات المخزنة في قاعدة البيانات من خلال كود ام أ٣٥5S»‏ وكل ذلك من خلال لغات 
برمجة مفتوحة المصدر ويرامج مجانيةء بأسلوب يتيح للمتعلم فتح آفاقا جديدة ورحبه تضعه على أول 
طريق توظيف ما يقوم بدراسته في حياته العلمية والعملية. 

وقد تم توفير الكود بالكامل للمتعلم لإنشاء صفحات الموقع بحيث يكون التركيز على اكتساب 
المعارف والمهارات الأساسية باللغتين العريية والإنجليزية وأن يكون تركيز المتعلم على فهم وتطوير 
أي كود ويطور مهاراته في البحث والتقصي عنها بالمكتبات أو من خلال الإنترنت» كما يتضمن 
الكتاب صورًا من واجهات التطبيق الفعلية المنفذة للمشروع لتوضيح جميع خطوات العمل وتبسيط 
المفاهيم لدى المتعلمين وكل ذلك من خلال أنشطة وتدريبات عملية. 

وأخيرًا فإن هذا الكتاب يحرص على تنمية المهارات الأساسية لدى الطلاب من خلال قضايا 
حياتية ليكون لديهم فرصًا يعبروا من خلالها عن إبداعاتهم ولتوضيح أهمية الكمبيوتر وتكنولوجيا 
المعلومات باعتبارها جزءَ من حياتهم اليومية. 
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محتوی الکتاب 


مقدمة عن موقع 'قاموس مصطاحات الكمبيوتر المصور' 
أوًلا: تهيئة البيئة المناسبة لإنشاء الموقع 


ثانيًا: إنشاء قاعدة بيانات 
ثاللًا: كيفية إنشاء موقع ويب 


رابعا: كيفية جعل صفحة الوبب دnliıيك "Dynamic Web Pages'‏ 
خامسًا: استخدام أحد مستعرضات الإنترنت 

إعداد جهاز الكمبيوتر الشخصي ۴٤‏ ليقوم بدور جهاز الخادم 5۷۴ 

الفصل الثاني: مراحل ومتطابات إنتاج مشروع 'قاموس مصطلحات الكمبيوتر المصور' 

المرحلة الثانية: إنشاء جداول قاعدة البيانات 

المرحلة الثالثة: مرحلة إنشاء صفحات الموقع 

إنشاء صفحة الاتصال بقاعدة الئبيlنlت Connection.php‏ 

المتغيرات والثوابت في لغة ۴۳4۲۴ 

الفصل الثالث: إنشاء صفحات موقع 'قاموس مصطلحات الكمبيوتر المصور' 


إنشاء صفحة المساعدة مpام١‏ 


الفصل الرابع: تأمين موaقع‏ وıب Secure Web Sie‏ 
مفهوم الiخترlق‏ ¬ڼPenetrati0 .Concept of‏ 
طرق حماية مواقع الويب. 
بعض إرشادات تأمين موقع الوبب. 
أنشاء صفحة تسجيل مستخدم جديد. 
وظيفة النموذج .۴٥١۲۳١‏ 


الفرق بين ك۴ و اه66. 


مفهوم الجلسة ١0أءءم؟.‏ 

التحقق من صحة ١٥اةكاج۷‏ البيانات المدخلة. 
تشفير كلمة المرور. 

إنشاء صفحة تسجيل دخول ٣‏ أوه!ا. 

تأمين قاعدة البيانات اSQ۵؟۷.‏ 


ا ل 


(۲- ۲( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


الوحدة الأولي 


مدخل فی تصمیيم مواقع الويب 
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كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 
تدریب: "مفاهیم اساسيه" 


E O E a 
ومعالجة بعض محتوياتها.‎ 


المطلوب: 


اختر الإجابة الصحيحة لكل عبارة مما يلي: 


البرامج التي يَسمح مالكها للجميع باستخدامها يطلق عليها: 


أ Free Ware‏ ب- Open SOurCe‏ ج- Write‏ ا 
تطلق عليه“ 
Free Ware -‏ پ=- Copy Write -€ Open Source‏ 


صفحة الويب التي تعرض بعض المعلومات ويظهر بها عنوان يتحرك من اليمين إلى 
اليسار على صفحة مستعرض الإنترنت تعتبر: 

www -¢ Static Web Page -ç Dynamic Web Page - 

صفحة الويب التي يمكن من خلالها عرض بيانات» ويسمح للمستخدم بتعديلها وحفظ 
البيانات المعغدلة يطلق عليها صفحة: 

Home Page -ğë Dynamic پ-‎ Static - 

کود ڏآ Script‏ الذي يستخدم في معالجة بعض البيانات على صفحة الويب بينفد کی 
أ- جهاز الخادم المُخزن عليه الموقع فقط ب- مستعرص الإنترنت فقط ج- كل منهما 
يکتب كود ٤‏ بلغات كثيرة من آشهرها: 

PHP ج-‎ HTML پ-=‎ C# - 

صفحة الويب التي تطلب منك إدخال اسم المستخدم وكلمة المرورء تعني أنه: 

ألا يتم إجراء معالجة لبياناتها ب- صفحة Database g؛»a Jjalzîi-ج Static Web Page‏ 
مصطلح إع۷آ م6 يشير إلى جهاز الكمبيوتر: 

أ- ذو المواصفات الفنية الأعلى عن باقي أجهزة الشبكة. 

ب- الأكبر حجمًا في الشبكة. 

ج- المتصل بشبكة الإنترنت. 

المصطلح ere‏ یمکن أن یشیر إلی: 

أ- جهاز الكمبيوتر الأقل في المواصفات الفنية. 

ب- الدور الذي يقوم به جهاز الكمبيوتر في شبكة الكمبيوتر. 

ج- جهاز الكمبيوتر الموجود لدى المدير العام. 

جهاز الكمبيوتر الذي يخزن عليه موقع ويب يطلق عليه: 


Web Server = Mail Server پ-=‎ Database Server - 
جهاز الكمبيوتر الذي يخزن عليه البريد الإلكتروني لشركة ما يطلق عليه:‎ 
Web Server -ğ Mail Server پ-‎ Database Server = 


تستخدم لغة الترميز ۳۲۷1 في إنشاء: 

Static Web Page -ç Dynamic Web Page -'‏ ج- PHP Page‏ 
صفحات الویب التي تحمل امتداد ۲ ۴1. تعني أنه یتم تنفیذ کود P383۲‏ علی: 

أ۔ مستعرض الإنترنت ‏ ب۔ جھاز العمیل ٤رعزاC‏ ج- جهاز الخادم Server‏ 
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(e) 


(4) 
9 
("۰) 


:aiعeڍ‎ Publishing web Site zİطÛصم‎ 

أ- نشر موقع على الإنترنت. 

ب- نشر صفحات موقع على جهاز کمبیوتر في شبكة کمبیوتر ٩‏ ۸.]. 

ج- نشر صفحات موقع على الإنترنت أو على جهاز كمبيوتر في شبكة. 

قامت إحدى الشركات بإنشاء موقع خاص بها لإدارة اعمالها ونشرته لجميع موظفيها 
فقط فإن هذا الموقع يعتبر: 

Host -& Hosting Web Site پ-‎ Local Host -Î 

العنوان التالي لأحد المواقع الخاص بشركة ما: صhttp://homepagse.ht›‏ من 
قراءتك للعنوان السابق نجد أن هذا الموقع تم نشره: 

أ محليًا [0ca1 6st‏ ب۔- على الإنترنت ع)¡S web‏ ۽ہiطisاPub‏ ج- محليًا وعلى الإنترنت. 
العنوان التالي لأحد المواقع الخاص بشركة ما: ›http:\homepage.htm‏ من 
قراءتك للعنوان السابق نجد أن هذا الموقع تم نشره: 

أ محليًا 6st‏ 1ا0ca[‏ ب۔- على الإنترنت ع)¡S we‏ ۽ہiطءiاPub‏ ج- محليًا وعلى الإنترنت. 

هناك العديد من البرامج المجانية الخاصة بنظم إدارة قواعد البيانات العلائقية منها: 

Access - SQL ب-‎ My SQL - 

لغة البرمجة التي تستخدم في التعامل مع البيانات المخزنة في قواعد البيانات هي: 

Access = Oracle ب-‎ SQL - 

مطور الموقع للمستخدم زيارته لبعض صفحات الموقع أو كلهاء يطلق عليها: 


Session =€ User Name پ-‎ Password ٺ-‎ 
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التدريب العملي الأول: "تنصيب برنامج رمره×" 
الهدف من التدريب: إعداد جهاز الكمبيوتر ليصبح جهاز ۲ع۷إءS.‏ 

يحتاج مطوري البرامج عند إنشاء موقع ويب إلى تجربة الموقع والتأكد من صحته محليًا قبل 
نشرہ علی الإنترنت» لذا نحتاج إلى تھيئة جھاز یقوم بدور جھاز الخادم ٣۷٣م‏ بحيث يصلح 
لاستضافة الموقع» باستخدام برنامج مثل .Xampp‏ 
المطلوب: تنصيب برنامج ممه تحت إشراف معلمك: 


یعتبر برنامج مہ ھ× من أفضل برامج إعداد جھاز الکمبیوتر "٤ئ0٣‏ 1ھعم["۰ فھو يتسم 

بالسهولة والقدرة على التعامل مع قواعد البيانات 1۷801 يمكن من خلال البحث في 
اضغط ع1٣-50‏ على ان.ذلJزd xampp-win32-5.6.3-0-VC11-installer.exe‏ 
ه وبعد ظهور الشاشة التالية: 


BitNami 


(شكل )١‏ 
تابح خطوات تنصيب البرنامج من خلال شاشات المعالج التالية: 


عرض '"شاشة ترحیب"'» تم اضغط على زر ")×م×". 


3 bitnami 


ه شاشة اختيار "مكونات البرنامج" قم باحتيارها جميعا وخاصة MYSQL ys Apache‏ 
ثم اضغط زر "×6×" 
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Select Components 8 


Select the cormnpgnen ou want to install; clear the components you do not want to install, Click 


Click on a component to get a detailed description 
Apache 

MYSQL 

Filezilla FTP Server 
Mercury Mail Server 
Tomcat 

ogram Languages 
PHP 

Perl 

ogram Languages 
phpMyAdmin 
Webalizer 

Fake Sendmail 


7 ISIS 


7 كا 


RRR 


XAMPP Installer 


Cancel 


@ ناك تحدبد المجاد الدي سینہ تنصيب البرنامج فيه» ثم أ ] زر "Next"‏ 


Installation folder 


Please, choose a 


Select a fold | C:\xampp| 


#AMPP Installer 


تعلم المزيد عن برنامج ممص ھچ تم اضغط زر .'"".e×)"‏ 


Bitnami for XAMPP 


Bitnami For XAMPP provides free installers that can install 
Drupal, Joomla!, WordPress and many other popular open 
e apps on top of ¥our existing XAMPP installation. 


X#AMPP Installer 


Cancel 


1 1 
. Next 
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كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


BitNami for XAMPP 


BitNami for XAMPP provides free installers that can install 


Drupal, Joomla!, WordPress and many other popular open Wel come to XAMPP'! 


source apps on top of your existing XAMPP installation. 


XAMPP is an easy to install Apache distribution 
WwW ي‎ 5 fn 0 containing MySQL, PHP and Perl. 


a ك‎ il ا‎ u و‎ 


Installing Installing 
Unpacking files 


xXA4MPP Installer : 7 x»AMPP Installer 


ثم اضغط زر "آکما۴'. 


Completing the XAMPP Setup Yizard 


ه في شاشة لوحة التحكم لبرنامج مم صه× تأكد من اختيار مطc‏ وم۸ واضغط على زر 
"Start"‏ اسفل "ئ رمآtع‏ ۰"۸ ونفس الشئ مع .MY¥YSQL‏ 


المتاح على جهازك» ثم اکتب في شر يط العنوان 0st‏ طاآومعم واضغط مفتاح الإدخال 
"Enter"‏ فتظهر الشاشة التالية: 
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Sececcssecessessesessesessesessecsssecsseesseseseeceseessesesesecsessseseseescssessseesseeessenee#! 


E] htip/ localhost ap 


XA M P P fo ۲ Wı n d OWS English / Deutsch / Francais / Nederlands / Polski / Italiano / 


Norwegian / Espafiol ı #X / Português (Brasil) ¢ E #}8 


Try out the new XAMPP welcome page 


We are working on a new Welcome page for XAMPP and we need your help! You can you can see the current 
version at Dashboard. We are improving our current "FAQs" and adding new "How to" gquides. We posted some 
suggestions for new guides at ApacheFriends forum. If you have any comments or suggestions for the new welcome 
page, please don't hesitate to post in the forum. Your feedback will help us improve XAMPP!. If you have any 
comments or suggestions for the new welcome page, please don't hesitate to post in the forum. Your feedback will 
help us improve XAMPP! 


Welcome to XAMPP for Windows! 


Congratulations: 
You have successfully installed XAMPP on this system! 


Now you can start using Apache and Co. You should first try @Status@ on the left navigation to make sure 
everything works fine. 


For OpenSSL support please use the test certificate with https://127.0.0.1 or https://localhost 

Good luck, Kay Vogelgesang + Kai 'Oswald' Seidler 

Install applications on XAMPP using Bitnami 

Apache Friends and Bitnami are cooperating to make dozens of open source applications available on XAMPP, for 


free. Bitnami-packaged applications include Wordpress, Drupal, Joomla! and dozens of others and can be deployed 
with one-click installers. Visit the Bitnami XAMPP page for details on the currently available apps. 


OOO 


XAMPP Hosting 


XAMPP provides an ideal local development environment, but is not meant for production deployments. We want to 
make hosting PHP applications created with XAMPP as easy as possible. Visit our Hosting page for reading our 
documentation. 


XAMPP 


32.6.3 
[PHP: 5.6.3] 


Welcome 


Status 

Security 
Documentation 
Components 
Applications 


e LD 


phpinfo() 

CD Collection 
Biorhythm 
Instant Art 
Phone Book 


perlinfo() 
Guest Book 


phpMyAdmin 
FileZilla FTP 
Webalizer 
Mail 


©2002-2015 
..« APACHE 
FRIENDS... 


.Expression Web جnliربڊ‎ 


0ca1 Host"‏ ا" ودعنا نؤکد على ما يلي: 


إنشاء موقع "قاموس مصطلحات الكمبيوتر المصور" يحتاج إلى تطبيق مثل 
"Expression Web"‏ والذي یمکن من خلاله عرض کود "H1٥۷"‏ لنحصل 
على صفحاتٽت ."Static Web"‏ 

لجعل صفحات الموقع عنصوم_ر أي يمكن إجراء معالجة على محتوياتها نستطيع 
إضافة كود بلغة "1۲" داخل كود "HTML"‏ 

تشغيل برنامج "إء۷إمS‏ عمطعوم ۸" ضروري لترجمة الكود الذي سنقوم بكتابته بلغة 
PHP"‏ . 

تشغيل برنامج "١۲م۷إمS "6Q1‏ ضروري للتعامل مع محتوى قواعد البيانات من 
خلال أوامر مكتوبة بلغة "ل1اS@Q".‏ 


(٤( 
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نشاط. "تحميل برnliج "xXAMPP‏ 

الهدف من النشاط: تحميل برنامج مم ,صه× لتشغيل تطبيقي eطإApac‏ » .MYSQL‏ 

وصف النشاط: لترجمة كود ۴8۴ لابد من تشغيل برنامج ممص ه× الذي يجعل جهازك يقوم 
بدور الخادم ›Ser ver‏ و تشغیل برنامج gs Appache‏ برنامج نظضم ادارة قواعد البيانات 
.MYSQL‏ 


المطلوب: 
.MYSQL s Appache‏ 


تنفيذ النشاط. 
يمكن تشغيل لوحة التحكم الخاصة ببرنامج ممصه× بأكثر من طريقةء منها: 


J WinRAR 0 
Jû xavpP كما بالشكل التالی:‎ S٤٣٤ قائمة‎ (۱( 
[E] Bitnami for XAMPP پا‎ 
™ Uninstall XAMPP 
E AAMIPP Control Panel 
ll XAMPP htdocs folder 
lJ Xvid 
۳" Yahoo! Messenger 
۳" YTO Video Downloader + 


- 
ا 


1 Eack 


|Szarch programs and files 
a ED 


تم من نافدة لوحة التحكم الألخاصة ببرنامج pp‏ صXa‏ كما بالشکل: 


قر Appache Jıغتl Start‏ 
وکذا زر Star‏ بجرار MYSQL‏ 
فیظهر على الزر رهغ؟ 


` E] XAMPP Control Panel v3.2.1 [ Compiled: May 7th 2013 ] آ ا کا‎ 
XAMPP Control Panel v3.2. gy Config 
Modules ê 
‘WD Netstat 
Service Module  PID(s) Port{s) Actio esta 
Apache 1812 80, 443 Stop ا‎ Admin | Config Logs i Shell 
MySQL 3456 3306 Stop Config Logs [| Explorer 
FileZilla Start Admin Config Logs Ww: Services 
Mercury Start Admin Config Logs @) Help 
Tomcat Start Admin Config Logs IH Quit 
07:50:44 ص‎ ]main] XAMPP Installation Directory: "c:\xampp\" 
07:50:44 ص‎ ]main[ Checking for prerequisites 
07:50:52 ص‎ ]main[ All prerequisites found 
07:50:52 ص‎ ]main][ Initializing Modules 
07:50:52 ص‎ ]Apache] XAMPP Apache Service is already running on port 30 
07:50:52 ص‎ ]Apache] XAMPP Apache Service is already running on port 443 
07:50:52 ص‎ ]mysqإا[‎ XAMPP MySQL Service is already running on port 3306 
07:50:52 ص‎ ]main[ Starting Check-Timer 
07:50:52 ص‎ ]main[ Control Panel Ready 


(۲) کما یمکن تشغیل مم ھ× من ملف ع×ع.01٣)رمc-ممصھ×‏ في مجلد 
ÞمٍC:\Xam»‏ مع مراعاة اي تغییر في مکان تنصیب برنامج مم إطھ×. 
(Oz N)‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


تغییر منفذ Localhost Jû apache port‏ 
ف بعض الأحيان تحدث مشكلة عند النقر على apache ءln! start‏ أتشغبله كما 
بالشكل التالى: 


E AAMPP Control Panel v3.2.1 [ Compiled: May 7th A2013 ] 


XAMPP Control Panel v3.2. 1 
Module PID(s) Ports) Actions 
Apache Admin 
MySAaAL tar Admin 
FileZilla Star Admin 


Mercury Admin 


Tomcat Star Admin 


12:59:31 ص‎ ]man][ about running this application with administrator rights! 

12:53:31 ص‎ ]maاn[‎ #XAMPP Installation Directory: "cixampp'™" 

12:59:31 ص‎ ]man][ Lhecking for prerequisites 

12:59:31 ص‎ ]man][ All prerequisites found 

12:59:31 ص‎ ]man[ Initializing Modules 

12:53:31 ص‎ ]Apache] Problem detectedl 

12:53:31 ص‎ ]Apache] Port B30 In use by "Unable to open process" with PID 4! 

12:53:31 ص‎ ]Apache] Apache WILL NOT start without the configured ports free! 
12:53:31 ص‎ ]Apache] You need to uninstaldisable/reconfigure the blocking application 
12:59:31 ص‎ ]Apache] or reconfigure Apache and the Control Panel to listen on a different port 
12:59:31 ص‎ ]man][ Starting Check-Timer 

12:53:31 ص‎ ]maln[ Control Panel Ready 


ار ا ا ا ا ا ی و ا ی ا ت ف 


في حالة تنصيب اكثر من خادم على نظام التشغيل» ويمكن حل هذه المشكلة بتحديد منفذ اخر 
لبرنامج عطعهم هج باتباع التالي : 


ه فتح ملف fرمd.cمh)t‏ الموجود بالمسار apache\conf\اxamppا:°‏ في محرر 
النصوص 4ھمع٤مم‏ كما بالشکكل التالی: 


(٥۲ -۱۲(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 
BEE‏ 


Ga J. | ل‎ C:\xampp\apache\conf <| + 


File Edit View JIools Help 
Organize v lj Open v Burn New folder 8= v> @ 


2 


Name Date modified Type 


7" extra 

7" original 

ssl.crt‏ ل 

7" ssl.csr 

3 ssl.key 

|_| charset.conv 
|W httpd.conf 


|__| magic 


a jl Computer 
4 8 Abdallah_Mansour (C:) 
> Jl savG 
: dl 75390073a585fdc4e4d822F9f882 
ظ‎ ۳" AdwCleaner 
> dl d9978869e590607f1b64 
ل ظ‎ Downloads 
ل‎ MSOCache 
7" PerfLogs 
۰ لل‎ Program Files 
ل ظ‎ ProgramData 
ل‎ SWsetup 
> Jl swrooLs 
1 ل‎ Users 
> Jl Windows 
> J) xampp 
` é3 Local Disk (D:) 
` & Removable Disk (6:) 


File folder 
File folder 
File folder 
File folder 
File folder 
CONV File 
CONF File 
File 
TYPES File 
CNF File 


+ 
dd (tg = = 


Ö6 © © o 


+ + + TTS 

ph pp fh 
+ + + + + 
RRR FR 


|_| mime.types 


٠ ۰ ٠ ٠ 
NRO © © © © © 


|_| openssl.cnf 


: li Network چ‎ 


<+ 4 | I 


: httpd.conf Date modified: ص ۸*/¥+/10ء۲‎ 1:0٦ Date created: ۲+*10/*£/11 ص‎ «Ll: 
ل‎ CONF File Size: 20.8 KB 


یمکن أيضا فتح نفس الملف بالنقر على gٍfiگcon‏ من liفذةö las Xampp Control Panel‏ 
بالشكل التالى: 


E) XAMPP Control Panel v3.2.1 [ Compiled: May 7th 2013 ] 


8 XAMPP Control Panel v3.2. 1 / Config 


r 
Service Module  PID(s) Ports) Actions @ Netstat 


Apache (Start | Admin [` 1nas | Shell 
Apache (httpd.conf) 
MySQL ۸ 
¥ [Start | ت س ات سرا‎ Apache (httpd-ssl.conf) 
FileZilla [Start | Admin Le Apache (httpd-xampp.conf) 
Mercury (Start | FFE ۴ PHP (php.ini) 
phpMyAdmin (config.inc.php) 
Tomcat Admin Ci 
I 
12:59:31 ص‎ ]mصain[‎ about running this application with administrator rights! < Browse> [PHP] 
12:59:31 ص‎ ]mصain[‎ XAMPP Installation Directory: "c:\xampp\" <Browse> [phpMyAdmin] 
12:59:31 ص‎ ]mصain[‎ Checking for prerequisites 
12:59:31 ص‎ ]main] All prerequisites found 
12:59:31 ص‎ ]mصain[‎ Initializing Modules 


12:59:31 ص‎ ]Apache] Problem detected! 

2:59:31 ص‎ ]Apache] Port 80 in use by "Unable to open process" with PID 4! 

2:59:31 ص‎ ]Apache] Apache WILL NOT start without the configured ports free! 
12:59:31 ص‎ [Apache] You need to uninstall/disable/reconfigure the blocking application 
12:59:31 ص‎ [Apache] or reconfigure Apache and the Control Panel to listen on a different port 
12:59:31 ص‎ ]main[ Starting Check-Timer 
12:59:31 ص‎ ]mصain[‎ Control Panel Ready 


ı1 


Sac ILLITE 
.۸٠٠ المنفذ )٣0م وهو‎ 


(٥۲ -۱۳(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 
httpd.conf - Notepad Î‏ 1 
File Edit Format View Help‏ 


Listen: Allows you to bind Apache to spec1f1c IP addre 
ports, Instead of the default. See also the <VirtualHc 
directive. 


change this to Listen on specific IP addresses as shov 
prevent Apache from glommîing onto all bound IP address 


SLI STEER IZ II6: 78 E0 


hk FE FE FE FE FE Fk 


Dynamî1ic shared Ob3Ject (DSO) support 


To be able to use the functionality of a module which 
have to place corresponding LoadModule' T1ines at this 
directives contained 1n 1t are actually available _bef 
statically comp1 led modules (those 11sted by httpd -1 
to be loaded here. 


Hk FE FE FE FE FE FE FF FF 


a 


رك تعره إلى ۸١‏ ت اغلاق الفلف ب حفط 
بعد اعادة تشغيل عمطعهومه نجد انه تم تشغيله بالمنفذ الجديد كما بالشكل 


EH AAMPP Control Panel v3.2.1 [ Compiled: May 7th A2013 ] 


89 XAMPP Control Panel v3.2.1 


Modules 
Service Module PIDs) Ports] Actions 


Apache 81, 443 [7 Stop 
Filezilla ٤ Admin 
Mercury Sta Admin | [Config] [ukoasus) © Help 

Tomcat Admin | [Config koga) gp aut هھ‎ | 


12:53:31 ص‎ ]Apache] You need to uninstaldisable/reconfigure the blocking application 
12: ص 31 ا‎ ]Apache] or reconfigure Apache and the Control Panel to listen on a different port 
12:59:31 ص‎ ]maln[ Starting Check-Timer 

12 31 ص‎ ]صaاn[‎ wontrol Panel Ready 

01:10:02 ص‎ ]Apache] Problem detected! 

01:10:02 ص‎ ]Apache] Port 30 In use by "Unable to open process" with PID 4! 

01:10:02 ص‎ ]Apache] Apache WILL NOT start without the configured ports free! 
01:10:02 ص‎ ]Apache] You need to uninstalldisable/reconfigqure the blocking application 
01:10:02 ص‎ ]Apache] or reconfigure Apache and the Control Panel to listen on gğfffê 
01:10:02 ص‎ ]Apache] Attempting to start Apache app... 

01:10:02 ص‎ ]Apache] Status change detected: running 


ولفتح موقىع م۲مصهج× يجب تحديد المنفذفي كل مرة بكتاإبة 
/http:///ocalhost:81/ xampp‏ كما بالشكل: 


(۶ د( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة ت تكنولوجيا المعلومات والاتصالات 


J http:/Nocalhosesıramep/_ J_> O Exaerss3 < | 


J XAMPP for WINQOWS erates oss, raress scree rav sare, 


orwegian / Espafiol ı #X / Português (Brasil) / E #}8 


XAMPP 


5.0.3 
[PHP: 5.6.3] 


Status 

Security 
Documentation 
Components 
Applications 


Php 


` phpinfo) 
CD Collection 


Biorhythm 
Instant Art 
Phone Book 


perl 
perlinfo() 
Guest Book 


J2ee 
Info 
Tomcat examples 


Tools 
phpMyAdmin 
FileZilla FTP 
Webalizer 
ElÎ 


©2002-2005 
.„..„ APACHE 
FRIENDS... 


٠٥(‏ ِ_ ۲( الصف الثاني الثانوى 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 
الوحدة الثائيه 


مراحل ومتطلبات إنتاج مشروع "قاموس مصطلحات الكمبيوتر المصور" 


-۱١(‏ °۲( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 
التدريب العملى الثانى: "إنشاء قاعدة بيانات" 


4 « 


الهدف من التدريب: استخدام برنامج MySQL‏ في إنشاء قاعدة بيانات. 
وصف التدريب: بما أنها المرة الأولى التي تحمل تطبيق ,S@]‏ لإنشاء قاعدة بيانات فإننا 
نحتاج إلى بعض المساعدة لتنفيذ ذلك. 


المطلوب: نفذ الخطوات التالية لإنشاء قاعدة بيانات باسم dictionary‏ تحتوي على جدول 
بیانات باسم 8ص٣16٠‏ بحيث تضم عدد (9) خمسة حقول ھي;: " — ID - Term - Terms‏ 
Defe - Picture‏ . 


نفذ عزيزي الطالب الخطوات التالية لتحقيق المطلوب: 


(1) 


شغل برنامج ممه الذي قمت بتنصيبه من قبل» ثم شغل برنامج .M8@1‏ 


XAMPP Control Panel v3.2.1 
Modules > 
Service Module PID(s) Ports) Actions @D Netstat 
E 3768 | Logs) 
e 3768 80, 443 Stop Admin Config BÖ Shell 
MysaL 2260 ج ج ج و‎ 
FileZilla Admin Config 


| 1 
Mercury Admin | Config | @) Help 
| 1 


Tomcat Admin Config 


[| Quit | 
00 ص‎ ]صain][‎ Enabling autostart for module "MySQL" 

00 ص‎ ]mصain[‎ Starting Check-Timer 

00 ص‎ ]mصain][‎ Control Panel Ready 

00 ص‎ ]Apache] Autostart active: starting... 

00 ص‎ ]Apache] Attempting to start Apache app... 

00 ص‎ ]صرysوا[‎ Autostart active: starting... 

00 ص‎ ]صرysوgا[‎ Attempting to start MySQL app... 

04 ص‎ ]Apache] Status change detected: running 

04 ص‎ ]صرysgا[‎ Status change detected: running 


NININ ANI ANNAN NINN 
ظط ظط طا د د طب ط د د‎ 


اكتب العنوان التالي: /۸ 1 ٣۷2d‏ م hم/calhostدا//: http‏ في شریط عنوان 


Te localhost/phpmyadmin/#PMAURL-0:index.php?db= &table= &server= 1&target= &token=45d4e0449c9b1d1595ed6443c6506a76 Û | OD 
phpMyAdmin Î Fl Server 1270.0.1 x 
^8 O3)0 Databases  []} SQL lf, Status =7 Users [ê Export  &} Import 4 Settings ll Replication ¢>) Variables  w More 
Rec avorites = & : 
| general settings § Database server | 
(gaa : 
ZE) (3) cdcol = Server connection collation @:  utf8mb4_general_ci » Server: 127.0.0.1 via TCPAP 
: e Server type: MySQL 
#}_(g information_schema «e Server version: 5.6.21 - MySQL Community Server (GPL) 
¥ ( mysql ٠ » Protocol version: 10 
¥ (J performance_schema | Appearance setilngs . User: root@localhost 


e Server charset: UTF-8 Unicode (utf8) 
¥ () phpmyadmin 


¥1 (3 term 7 Language @ | English 


#) (o test 


€D Theme: pmahomme ” VvVepD Server 
+1! webauth 
Font size: | 82% Y » Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.6.3 


» Database client version: libmysql - mysqlnd 5.0.1 1-dev - 
g* More settings 20120503 - $Id: 


f373ea5dd5538761406a8022a4b8a374418b240e $ 
e PHP extension: mysqli @ 


e Version information: 4.2.11 
» Documentation 

e Wiki 

» Official Homepage 

» Contribute 

» Get support 

e List of changes 


(٥۲ -۱۷(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


"Appearance Setting"‏ ثم اضغط "NEW"‏ المشار إليها أعلى يسار الشاشة 
لتظهر لك الشاشة التالية: 


Î Gî Server 127.0.0.1 


J Databases [Î] SQL ll, Status 37 Users [ Export &} Import 4# Settings ll Replication 4>] Variables ww More 


phpMyAdmin 
® &@ @ 4) © 


Recent Favorites 


م 2 م —Jıgğ New‏ 
e‏ ۲ اکتب اسم فاعدة Databases‏ 8 8 

۳۔ انقر زر C٤4٥‏ : 
کک : الائات اأحدىدة (g cdcol‏ | 
لإنشاء فاعدة البيانات @ information_schema ğ Create database‏ 3_| 


B_G mysql JDatabase name _ 


Collation "| [Greate] 
¥ performance_schema 


Eg Pom /% Note: Enabling the database statistics here might cause heavy traffic between the web server and the MySQL server. 


+1 [ı term 


+) lı test 


#1 ¢ webauth 5 
latin1_swedish_ci a2] Check Privileges 


Collation‏ ھ ا 
aa‏ 
cdcol‏ 


latin1_general_ci a>) Check Privileges 


utfs_general_ci a=] Check Privileges 
latin1_swedish_ci a=] Check Privileges 0 O O 
| performance_schema_ utfs_general_ci |B Check Privileges 

PRERIERs utfs_bin a=] Check Privileges 


وفيها يظهر أسماء قواعد البيانات السابق إنشاؤهاء وبعد كتابة اسم قاعدة البيانات المراد 
إنشاؤها وهي "ر٣ه”هتاءd1‏ طق" وبالضغط على زر "ع4٥٣‏ €" يتم إنشاء قاعدة البيانات 
الجديدة. 


phpMyAdmin 
all #00) @ لاحظ ظهور اسم قاعدة البيانات التي تم إنشاءها‎ 


Recent Favorites 


ضمن قواعد البيانات السابقة كما في الشاشة. NEW‏ 


8 
- cdcol 
+| lı dbdictionary 


+| lı informatlon_schema 
+ lul mysql 


(٥۲ -۱۸(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


)٤(‏ وبالضغط ينا على قاعدة البيانات "راء 1ط" تظهر الشاشة الي 


Query 4 Export #5} Import #7 Operations W More 


Number of columns: | 4 


a e 


4 Search 


J structure [j SQL 
_ 


No tables found in database. 


Name: | [ 


phpMyAdmin 


^ 4l ãة‎ @ 0) @ 


Recent Favorites 


dbdictionary 
employees 
inîormgii 
mysql 


تأکد من اختیار تبویب ٣٥"‏ ں)ctںآ)S"‏ وتحت "ماطھ٤‏ مtھمr‏ €" اکتب اسم جدول البیانات 
المراد إنشاؤه وهو "کوصع ٠"۲‏ ثم ادخل عدد حقول الجدول في '"ئہرصuاہە€‏ fه "Number‏ ولیکن 
()» واخيرًّا اضغط 11ا٣‏ على زر "60" لتظهر النافذة التالية: 


~~} Import =7 Privileges # Operations YW More 


Go 
structure û) 
Collation Attributes Null Index 
إ۷ إا‎ | ÛJ | PRIM. 
None |v]| | utf8_croatian_ci [¥] j mM 
None |v]| | utf8_croatian_ci [¥] j Û j- 
None [vV]| _ utf8_croatian_ci [|] j mM 
None EMÎ Û j- 


حتى تستطيع الكتابة باللغة العربية داخل الحقل 
حدد ثظاد الثشف 


¥# Insert | Expg 


Storage 
InnoDB 


نوع بيانات الحقل 
Data Type‏ 


earch 


VARCHAR s00 
VARCHAR E 
VARCHAR j pw 
VARCHAR vl [3o0 


| Browse 


Table name: 


term 


trans 


defe 


picture 


Table comments: 


PARTITION definition: @) 


ل 


تذكر أن جدول البيانات يتكون من حقول ول 1م۴1 وأن كل حقل لابد أن يكون له اسم وهو 
ما يجب ادخاله اسفل "Name"‏ ونو ع وهو ما یجب تحدیده أسفل "Type"‏ وحجم أو طول 
الحقل وهو القيمة المطلوب إدخالها أسفل "sعںاه۷طاومم"»‏ وحتى يمكن الكتابة باللغة العربية 
داخل الحقل فيجب اختيار نوع التشفير أسفل "«ه1اهاآاه٤"»‏ وأخيرّا اضغط زر "$4۷٥"‏ لحفظ 


جدول البیانات تحت اسم "٤دص‏ ٣م‏ '. 


)°( بعد الضغط على زر "٥ه"‏ تظهر الشاشة التالية: 


ver 127.0.0.1 » ® Database: test » BE Table: terms 


# Insert | Export lk} Import =7 Privileges # Operations YW More 


Rows @) Type Collation Size Overhead ۹( 
Browse # Structure $ Search Fé Insert @ Empty @ Drop O0 InnoDB latin1_swedish_ci 16 KiB - 
O0 InnoDB latin1_swedish_ci 16 KiB 0 B 


Structure jj SQL 4 Search 


With selected: ب‎ 


Srowse # 


Table a Action 


[J] terms ۳ 


1 taþle Sum 


1 Check All 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


والتي يتضح فيها اسم جدول البيانات الذي تم إنشاؤه» وعدد الجداول في قاعدة البيانات 
الحالية. 

وبنفس الطريقة يمكنك بمساعدة معلمك إنشاء أي جداول أخرى في قاعدة البيانات حسب 
احتياجاتك. 


(1) استعرض الهيكل البنائي لجدول قاعدة البيانات "رإه,رمذاءألق ط4" وذلك باختيار اسم 
جدول البیانات "کہہإمآ'۰ تم اضغط عز[إC€‏ علی زر "٤إ‏ ں)cںا)S"“‏ کما هو 
موت ا 


اسماء الحقول في 


Tor nc «Î اا د‎ 
060/ phpmyadmin PETIT FFE TEETER 0۸-C 8 localhost:8080 / 127.0.0.1 / ... 3 n 
س‎ Server: 1270.0.1 » ® Database: dbdictionary » BE Table: terms ^A 
phpMy n ^ 
® لھ‎ ê e | | Browse #4 structure |j SQL | search #é Insert | Export İl} Import  Y More 
cent Favorites # Name Type Collation Attributes Null Default Extra Action 
New 1 id int(11) No None AUTO_INCREMENT #F change @ Drop w More 
1 J 72 term ْvarchar(500) utf8_croatian_Ci No None J Change @ Drop w More 
-| | ı| dbdictionary EE: : 1 
1 3 New 3 trans varchar(500) utf8_croatian_ ci No None # Change @ Drop w More 
STE [J 4 defe ْvarchar(5000) utf8_croatian_Ci No None J change @ Drop w More 
+1 # users 5 picture varchar(300) utf8_croatian_cCci No None # change @ Drop w More 
E 1 [_J Check All with selected: |] Browse  ##F change @ Drop gP Primary [Gg Unique  #] Index 
information_schema 
mysql @ Print view #® Relation view Ëğ Propose table structure @ ® Track table j$ Move columns 
1 
+| | „| performance_schema $ 1 
| : #EAdd | 1 column(s) (®) At End of Table (J) At Beginning of Table OJAfter | id | 
+| | „i phpmyadmin 5 
| + Indexes 
2 test 
+| lı webauth Information 
Space usage Row statistics 
Data 16 KiB Format Compact 
Index 0 B Collation latin1 swedish ci 
Total 16 KiB Next autoindex 10 
Creation May 12, 2015 at 12:10 AM 
۷ 


نلاحظ في الشاشه السابعه ما يلي: 

ه التبويب النشط أعلى الشاشة "كءإu)عuإ)S"»‏ يمكنك الاسترشاد بها عند إنشاء جدول 
Terms"‏ “'. 

م اسم قاعدة البيانات ."dbdictionary"‏ 

.'٣ماآ اسم جدول البیانات "کہ‎ ٠ 

6 وي جدول البیانات "کص آم1" علی (٤(‏ خمسة حقول» يظهر اسمائها وأنواعها 
واحجامها. 

ه تم تعيين حقل "1" حقل مفتاح أuاسي .Primary Key‏ 

(۲۰- ۲( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 
ه تستطيع اختيار حقل والتحكم في خصائصه من خلال مجموعة الأزرار أسفل الحقل 


الأخير. 
ه كما تستطيع أن تضيف حقل جديد أيضًا وتحديد مكان إضافته في الجدول النشط. 


(۷) اختر جدول البیانات المراد إدخال بیانات فیھ "کوہر ۰'۲ ثم اضغط عز[ا€ على 
تبویب "٣٣عء['۰‏ وادخل البیانات في کل حقل اسفل "eںu‏ اھ۷" 


= Server 127.0.0.1 » ® Database: dbdictionary » BE Table: terms 


| | Browse # structure jÎ SQL 


4 search _#E Insert |4 Export la} Import a7 Privileges # Operations WW More 
Column _ZJiıضع‎ Null Value 
٤ Vv 


term varchar(500) 
trans varchar(500) ۷ 
defe varchar(5000) v۷ 
picture varchar(300) 
Ignore 
Column Type Function Null Value 
id int(11) إا‎ 
term varchar(500) إ۷‎ 
trans varchar(500) پټ‎ 
defe varchar(5000) ي‎ 
picture varchar(300) ي‎ 
Insert as new row ۷| and then Go back to previous page | ¥ 
ض‌‎ Go <eset 


وبنفس الطريقة تستطيع إدخال بيانات في أي جدول من جداول قاعدة البيانات باستخدام تطبيق 
.MySQL‏ 


(٥۲ -۲۱(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 
التدريب العملى الثالث "إنشاء صفحه ويب" 


الهدف من التدريب: استخدام كود [1١1‏ في إنشاء صفحة ويب. 

وصف التدريب: تعرفنا عزيزي الطالب مكونات الهيكل البنائي لكرد ۳1١1‏ المُستخدم في 
إنشاء صفحة ويب وشروط حفظها. 

المطلوب: 


انشئ صفحة ويب باسم "1٤ء٥1"‏ تعرض الاتي: 

. "My First Web Page" ٽنرتi! عنوان صفحة مستعرض‎ 

عبارة "الكمبيوتر التعليمي" في أول سطر من شاشة مستعرض الإنترنت. 

في السطر الثاني: صورة علم مصر في منتصف الشاشة. 

في السطر الثالث عبارة: "تحيا مصر" بخط عنوان رقم )١(‏ في منتصف الشاشة أيضًا. 
في السطر الرابع عبارة: "الصفحة الثانية" في يمين شاشة المستعرض. 


خطوات التنفيد 
)١(‏ حمل برنامج محرر النصورص 4ه4مNN0.‏ 
(۲) اكتب الكود التالي: 


® Test1.htm - Notepad EF 


My First web Page 
</T1Itle> 
</ Head> 
<BoOdYyY> 
الكمبيوتر التعليمي‎ 
<p align = "Center"'> 
<img src = "EQgYPt.JPQg" > 
>H11< تحیا مصر‎ >/ ۸1< 
</ p> 
<p align = "r1ght"> <م /< الصفحة التانية‎ 
</ BOQY> 
</HTML> 


(۳) احفظ الملف باسم وامتداد "٥)٤ط.s)1٤"‏ علی سطح المكتب» ثم اختر 
"UTE -8"‏ من Encoding‏ أسفل شاشة حفظ الملف وذلك لعرض النصوص العربية 

)٤(‏ افتح الملف "«")ط.1٤ء٥1"‏ من سطح المكتب وانظر إلى نتيجة تنفيذ الكود في شاشة 
مستعرض الإنترنت لتظهر كما يلي: 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


3 My First Web Page - Microsoft Internet Explorer 
File Edit Yjew Favorites Tools Help 


BD 2 ۵ ا کے‎ Search Sg Favorites € | > 


Address a C:fDocuments and SettingsiahmediDesktop û TIةxız‎ 3i Test1.htm 


1 My Computer 
على‎ R-Click eT ویمکن استعراض كود ]1۲۷ لإجراء أي تعديلء وذلك‎ )°( 
من القائمة المختصرة‎ "View Source" صفحة مستعرض الإنترنت واختر أمر‎ 


كما يلي: 


3 My First Web Page - Microsoft Internet Explorer 


U PPO E e EE (١) 


نشاط: "إنشاء صفحة ويب" 


المطلوب: 


انشئ صفحة ويب باسم "162" تعرض الأتي: 


. "My Second Web Page" تٽنرتiڼلا عنوان صفحة مستعرض‎ ٠ 

ه عبارة "إدخلوا مصر إن شاء الله آمنين" في أول سطر من شاشة مستعرض الإنترنت. 

ه في السطر الثاني: ضع صورة علم مصر وبجوارها عبارة "الصفحة الأولى" في يمين 
شاشة المستعرض بالابعاد التالبة ٠٠."‏ »٭ "٠١٠١‏ 


خطوات التنفيذ 
استرشد عزيزي الطالب بالمهارات ااي اكتسبتها في التدريب العملي السابق 
(١)‏ برنامج محرر النصوص الذي سوف تستخدمه في كتابة كود M٣‏ 1] هو ا 
)١(‏ اكتب الكود التالي: 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


®. Test2.htm - Notepad 
File Edit Format Yiew Help 


<HTML> 
<Head> 
<TI1Itle> 
My second Web Page 
</TItle> 
</ Head> 


<BoOdy> ا‎ 
إدخلوا مصر إن شاء الله آمنین‎ 
<p align = "RI1ght'"'> 
<img srC = "EgYPtE.-.JPO" 
heîght=50 w1dth=100> 
<م /> الصفحة الآأولى‎ 
</ BOQdY> 


</HTML> 


(۳) احفظ الملف باسم وامتداد "۲5٤2.٤"‏ على سطح المكتب» ثم اختر 
"U TF -8"‏ من Encoding‏ أسفل شاشة حفظ الملف. 

)٤(‏ افتح الملف على سطح المكتب وانظر نتيجة تنفيذ الكود في شاشة مستعرض الإنترنت› 
ا کالتالی: 


') My Second Web Page - Mozilla Firefox 
Fle Edt Yew History Bookmarks TWols Help 


| My Second Web Page ا‎ 


ُ | File CDocuments and Settingsahrmed( Desktop û Aaa festa. 


ا 


(*) اكمل الجدول التالي: 
<Title>‏ 


My Second Web Page 
</Title> 
<Body> 

ادخلوا مصر إن شاء الله آمنین 


الكود <۲> فقرة جديدة» align = '"Center''y‏ خاصية تعني محاذاة النص التالي 
لها توسيط على شاشه المستعرض إلى أن يغلق ال وهآ كما يلي <۲/>. 


<p align = '"'"Center''> 


<img src = "Egypt.jpg'' 
height = 50 width = 100> 


التدريب العملي الرابع "الربط بين صفحات الويب" 


(٥۲-۲۶(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


اسم التدريب: "الربط بين صفحات الويب"'. 

الهدف من التدريب: كتابة كود بلغة اط وتوظيف إحدى تطبيقات إنشاء مواقع ويب في الربط 
بين صفحات موقع ويب. 

إحدى التطبيقات للتعديل في صفحتي الويب والربط بينهما من خلال نص أو صورة. 


المطلوب 
مدل ما يلزم في صفحتي الویب "۴٤1.٤"‏ و "ہ٤ط.est2"‏ من خلال تطبیق 
Expression Web‏ او التعدیل في کود ۲M‏ ]ا بحیٹ: 
e‏ یتم الانتقال إلى الصفحة "«")ط.2٤4٥1"‏ عند الضغط على النص '"الصفحة الثاني" کے 
شاشة مستعرض الصفحۂ "۸ہ ٤ط.t{1یe'.‏ 
ه ويمكن العودة إلى الصفحة الأولی "ہ)ط.1)ی٥1"‏ إذا تم الضغط على صورة "علم 
مصر" أسفل شاشة المستعرض للصفحة "١)ط.2٤sء۲eآ".‏ 


خطوات التنفيذ 
أولاً: باستخدام تآ¡طبق Expression Web‏ 
وذلك باتباع الخطوات التالية: 


Expression Web جanliرڊ‎ Jn (1) 

(۲) افتح صفحتي الویب "ہ)ط.t1ء٥۲"''‏ و "m۳)ط.es)2‏ ا" من خلال قائمة ملف ما۴ 
ثم اختر منھا أمر فتح مم۰0 واختر اسم الملف "ہtط.1٤ی]'›‏ وکرر ما سبق 
للملف الثاني "ہ٤ط.2٤esآ'.‏ 


(@ + ^ j «< ANSARY1 (Fı) * ث2‎ >» 


Organize v New folder 


^۸ Name 


al Libraries A Shortcut to vbscri 


ë| Documents 


Music‏ ۾ 


| Pictures 


C1907 13 MM AA 
J Ar ا‎ 4۷ 
5/17/2004 1:42 AM 
1 5/17/2004 6:02 AM 
5/17/2004 6:00 AN 
Ef Videos 2/17/2004 5:23 AM 
اقة‎ 5/17/2004 5:23 AN 
3 Homegroup €] Test22 5/17/2004 2:12 AN 
2/19/2015 8:10 PN 

015 56 ۶A 

) ) ( 


¥ xampp-win32-5.6.3-0-VC11-installer 
الصف القانى الثانوى الفصل الدراسى الاول 9ا ا وا‎ --.. 
و‎ 05 )C:( 
ga RECOVERY (E:) 
ZZ ANSARY1 (F:) 


الصف الثانى الثانوى القصل الدراسي الاول 2سا 
الصف الثانى الثانوى القصل الدراسي الاول 5 
کناب 2 ث 8ا 

VY & 


File name:  Test1 v All Files 


Tools vw Cancel 


)۲( لبظْهر اسم : صفحتي الويب في ا البرنامج كما ا 
(۲۰ _ ۲( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


; File Edit View Insert Format Tools Table Site DataView Task Panes Win 
:01-E-HEM SEQ.” 71# BB F1 9 - Ce TIE 
ا‎ Paragraph > (Default Font) + (Default Size) 


۳ C:\UserslansaryNew\Documents A 
Z| Butterfly Fish.jpg 
Z| button 1C.jpg 
ğ& button 1D.jpa 
Z| button 1E.jpg 
|_| CV.dwt 
fa} default.htm 
| s] hopes.htm 
|] personal_data.htm 


| a] qualification.htm 


< 


a Attach Style Sheet... 


Select CSS style to apply: 


امعن النظر في الشاشة السابقة لاستيعاب وتطبيق ما يلي: 


يظهر اسماء صفحتي الويب "Test1.h†¬"‏ و ."Test2.htm"‏ 

الصفحة التي قمنا بإنشائها من خلال كود لغة الترميز اM‏ ۳۲ تظهر كما لو 
كانت في شاشة المستعرض وهو ما سبق وأشرنا إليه في خاصية 
»))W۲ 1W ۲6 (‏ ويمكن إجراء أي تنسيق أو تأثير أو إضافة أي نوع من 
أنواع المعلومات في الصفحة من خلال الكتابة والإدراج بسهولة كما لوكنت 
تتعامل مع أي برنامج معالجة نصوص وهو ما يظهر في أشرطة الأدوات. 
الأزرار الثلاتة. :Design‏ يعرض صفحة الويب كما تظهر في ENE‏ 
مستعرض الإنترنت» والزر مله€: يعرض كود لغة الترميز ا11 لجميع 
جزأين الأول تظهر فيه صفحة الويب والجزء الأخير يظهر فيه كود ا1 
ليس هذا فقط بل أن كل جزء في صفحة الويب في شاشة رعاوم يتم 
تحديدة )٥ء1م5‏ يظهر مباشرة كود H۲]‏ الخاص به في شاشة الكود. 


(٤(‏ نشط صفحة الأو بب الأولى “"Test1.h{im"‏ تم اضغط Split Jj‏ أتظهر صفحة الويب 
وکود |1 ]۳ الخاص بها. 

)٥(‏ أعمل ارتباط تشعبي للعبارة "الصفحة الثانية"» يلزم أو لا تحدبدھا {cع]ع‌S»›‏ تم اختر من 
قائمة إدراج "۲إعء,1" أمر "مناإمءم ر1" لتظهر النافذة التالية: 


0  يوناثلا ا الصف الثاني‎ (O, 


)٥۲-۲١( 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


أ الصقحة التانية 


ها سا 
م 


Text to display: 


€ | F2 û\ Test1.htm (open) 
2 F:\2 i Test2.htm (open) 
lë Butterfly Fish.jpg | Target Frame... 
Î button1C.jpg 

| button1D.jpg Parameters... 
lë button1E.jpg 

CV dwt 
@ | default htm 
2 | hopes.htm 
" | personal_data.hîm 


Testa, htm ب‎ | 


ا ل 
E-mail Address =‏ 


م اختر اسم الصفحة "ہط.2)یء]' تم اضغط زر .'"'0K"‏ 


(١(‏ بذلك تصبح العبارة "الصفحة الثانية" ارتباط تشعبي حيث تظهر بلون مميزء وتحتها 


خط SERRE‏ الإرتباط التشعبي کی نافدة Design‏ ينم تظليل كyد HTML‏ في 
نافذدة عل ٤٥‏ كما يلي: 


vw 


ای 

; File Edit View Insert Format Tools Table Site Data View Task Panes Window Help Type a question for help 
D0 -E-H SG Q- 7| ¥ BB FI 99-C ۰-٧ BH Lt All @&| A O1 7 -|@ 

: A Paragraph > (Default Font) + (Default Size) j ul > =5 5 

ESE ESN-E EE کے 2 ق‎ show Layout Tool [A jA 


</Head> 
<Body> 
الكمبيوتر التعليمي‎ 
<P align = "Center"> 
¢ src = "E 6 width="256" height="107"> 
ia gypPt. jpg" ۶ Î Horizontal Line 
laãl Image 


ãË Inline Frame 


<f] c1ass="sty1eع1"> ا تجا مصر‎ 
7 <P align = "right"> 1re est2. 
18 </Body> 
19 </HTML> 
Layer 
[ Paragraph 


Apply Styles 
Apply Styles Manage Styles. _X| 


^4 New Style... Î Options 7 | 
A} Attach style sheet... 


Select CSS style to apply: 


)۷( نفس الطريقة نستطيع جعل علم س ارتباط تشعبى من خلال شط سفحة الويب 
ا »""est2.htm"‏ مع التأكد من الضغط على زر نام؟. 

)۸( اضغط C11)‏ علی صورۂ علم مصر اتحديدهاء ثم اختر من قائمة إدراج Insert"‏ 

أمر "kمناامءم‏ ر1" لتظهر النافذة التالية: 


Text to display: | x Selection in Document z x 
Look in: 
E Test .htm (open) 
2 | Test2.htm (open) 


.'"'0K" اختر اسم الصفحة "ہط.1)یء]"' ثم اضغط زر‎ ٠ 


(٥۲ -۲۷(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


)٩(‏ بذلك تصبح صورة علم مصر ارتباط تشعبي حيث يتغير مؤشر الفأرة عند التأشير 
عليهاء وعند تحديد الإرتباط التشعبي أي صورة العلم في نافذة مع1وم يتم تظليل 
كود M[‏ ۲1 في نافذة مله كما يلي: 


i x 

; File Edit View Insert Format Tools Table Site DataView Task Panes Window Help Type a question for help چ‎ 
:0-SE-EAM AREA ¥7 «BEB 9-©C©-BHIMHRA @ Ad O0 TT -|(@ o» o » « o 

: Aj Paragraph > (Default Font) - (Default Size) <|B_Z = > چ چ‎ 5 KX a |j= i= 3ë چ‎ Ww. 


ادا هھ + ٦‏ ۹١ح‏ 


1E omnes 
</Head> 


<Body> 
<div class="style2"> 
إدخلوا مصر إن شاء له آمتين<3۲0139>‎ 
</strong></div> 


20 <p align = "Right"> i Inline Frame 
|] personal_data.htm 3 <a href="Test1.htm"> - 


5 سس‎ htm 22 <imq src = "Egypt.jpg" Height=50 Width=100 class="style1l"></a> i {Layer 
nı 3 : 23 <ط/> الصقحة الأولى‎ «[ Paragraph 
24 </Body> 
Apply Styles 
إدخلوا مصر إن شاء الله آمنين‎ Apply Styles 
4 New Style... | Options 


<img.style 1> Aj Attach Style Sheet... 


=1 Attributes ^ E 
f class style1 س‎ Select CSS style to apply: 
rfi height 50 Eg 


Clear Styles 
Ef src Egypt.jpq ۰ 


rf width 100 [=1 Current Page 
ê acces... 
Ê align 


Test1.htm Visual Aids: On Style Application: Auto 4.41 KB Quirks 591x186 lIE6 CSS2.1 


(١ ۰ (‏ لتجربة الارتباط التشعبي والانتقال إلى الصفحة "رط '"T"cs{2.‏ وضغط Click‏ قا 
الارتباط التشعبي "الصفحة الثانية" مع استمرار الت غط گا مفتاح 1 بلو حة 
المفاتيح» فتنتقل إلى اللصفحة الثانية "ر)ط.2وء'1"' وتصبح نشطة. 

)۱ ۱( وأيضًا يمكن العودة الى الصفحة ٠"‏ ]ط.1)یء۰"1 اضغط )ع C1]‏ على الارتباط 
التشعبي صورة علم مصر مع استمرار الضغط على مفتاح 1) بلوحة المفاتيح› 
فتنتقل إلى الصفحة الأولى ".ط.1)ءء1" وتصبح نشطة. 


(۲۸ - 0۲( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


ثانيًا: في كود لغة الترميز M1‏ 1۲ 


)١(‏ عدل الكود في ")ط.1)٤‏ 1" كما يلي: 


ٍ My First web Page 
</T1tle> 


الكمبيوتر التعليمي 
<p align = "Center">‏ 
<img src = "Egypt. jpg" >‏ 
<۳۸1/> تحیا مصر <۱11> 
</p>‏ 
"right">‏ = ااا <P‏ 
>/a<‏ الصفحة lîllنaıة‏ >"mخh <a href = "test2.‏ 
p>İ‏ /< 
BOody>‏ /< 
</HTML>‏ 


نلاحظ أنه تم وضع النص المراد جعله ارتباط تشعبي بين بداية ونهاية الكود التالي: 
<و/> الصفحه الثانية > <a href = "test2.htm"‏ 


3 My First Web Page - Microsoft Internet Explorer OES 


Eile Edit MEL Faworites Tools Help 


ت ج EEE le Favorites‏ کر ۳٣ D‏ 8ا 


اأ فحة اأتانية 


MY Computer‏ ل 


® Test2.htm - Notepad 
File Edit Format View Help 


<HI ML> 
<Head> 
<TItlIe>=> 
MY second web Page 
</TItlIe> 
</ Head=> 


<BOdYyY> 
ادخلوا مصر إن شاء الله آمتین‎ 
<P al1gn = "R1ght'""> 
<a href = "Testl.htm'""> 
<T1mg srC = "FE9gYPTtE -JPO" 
He19ght=50 WIdth=100> </a> 
<صم /> الصقحة ال<ولى‎ 


(o - ۲۹(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 
كما نلاحظ آنه تم وضع كود إدراج الصورة المراد جعلها ارتباط تشعبي بين بداية ونهاية 
الوسم التالي: 
<a href = '"'Test1.htm''>‏ 
<img src = "Egypt.jpg'' Height=50 Width=100>‏ 
</a>‏ 


ZÎ My Second Web Page - Microsoft Internet Explorer 


Fila Edit Yijew Favorites Tools Help 


DB 2 کر ف‎ search ê Favorites € 


إدخلوا مر إن شاء انش أمنين 


الصفحة الاولي 


3 Filet: Documents tZUandk2U5ettingsahmedDesktop] û1 + 1 ل اتنب + انيد ةا‎ MY Lormpukter 


."Test2.htm" و‎ "1es1.h†¬" احفظ التعديلات في الملفين‎ )١( 

)٤(‏ افتح الملف "ص)ط.11ءء 1" من سطح المكتب وانظر إلى نتيجة تنفيذ الكود في شاشة 
مستعر ضص الإنترنت»› تم اضخط علی الارتباط التشعبي "الصفحة الثانية"» وسوف تنتقل 
إلى صفحة "1٥١2.1"‏ وتظهر في شاشة المستعرض» ومن صفحة الويب الثانية 
".2ء" نستطيع العودة إلى الصفحة الأولی "۳)ط. 1٤ء٥"‏ بالضغط على 
الارتباط التشعبي "صورة علم مصر". 


التدريب العملي الخامس: "إنشاء صفحۂ ."Header.php‏ 

الهدف من التدريب: إنشاء صفحة ويب من خلال تطبيق. 

وصف التدريب: من خلال برنامج جاهز نستطيع إدراج وصورة وكتابة بعض النصوص تحتها 
وأجراء بعص اأتنسيقات عليهاء اتظهر بشکل مناسب»› وذلك لإنشاء صفحة Header‏ 


المطلوب: 


انشئ صفحة عل هم1 باستخدام تطبيق بحيث تحتوي على: 


© صورة مناسبة تظهر في بداية صفحات الموقع. 
ه النصوص الأساسية التي سيتم ربطها بصفحات الموقع لمساعد المتعامل مع الموقع من 
التجول فيه. 
خطوات التنفيذ 


(۲۰- °( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 

Expression Web جaliرڊ‎ Jn (1) 

(۲) اختر أسلوب العرض اذام؟. 

(۲) ادرج صورة .Banner‏ 

)٤(‏ اكتب النصوص التالية أسفل الصورة: الرئيسة - إدخال مصطلح - بحث عن 
مصطلح - تعديل/حذف مصطلح - مساعدة. 

ملاحظة: يمكنك من خلال التطبيق أيضًا إنشاء صفحة ويب من نوع ۲۲3۲ وتكتب فيها الكود 


التالى : 
كما يمكن إنشاء صفحة "م طم.إعلaع1"‏ بلغة P3۲‏ بالكود التالي: 


1 <himl dir="rtl'"z™ 


2 <headz 
3 <meta content="text'html:; charsetluti-8" http-equiv="Content-Type"™ 
4 < headz 
5 <body> 
6 <divz 
7 <iIme helght='161' src='images/banner.jpg' width=' 1267" > 
8 <div 
ت‎ 
10 <div style="width: 1256px;text-alen:right" = &nbsp: 
11 <a href"index.plp">ةيسيئرلا=/‎ < 
12 &nbsp;&nbsp;:&nbsp;é&nbsp;&nbsp;:&nbsp:; 
13 <a href="add term.php">&1bsp:glطصم إضافة‎ 
14 laz &nbsp;i&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: 
15 <a href="search term.php'"> glطصم <و/=البحث عن‎ 
16 &nbsp;&nbsp;&nbsp;&nbsp;i&nbsp;&nbsp;:&nbsp:; 
17 <a href="Del Term.php'"> glطصم و“ حذف‎ 
18 &nbsp;&nbsp:;i&nbsp:i&nbsp:i&nbsp;&nbsp:&nbsp: 
19 <a href="Edit Term.php">glطصم‎ Jيدعت‎ 
20 <laz&nbsp;i&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp: 
21 <a href="Help.php"z êla <a> 
22 dîy 
23 
24 <body 
25 him 


الكود السابق يتم عمله في نمط التصميم «عائمل ج 
ارتباط تشعبی كما يلي: ا 


# Inline Frame 


۳ Layer 
¢ Paragraph 


+ Form Controls 


Copy‏ 3ا 
Fe" Paste‏ 
۱ - افتح صفحهة header.php‏ مں خلال Quick Tag Editor...‏ 
#i Manage Editable Regions... ( ۷_۳ )‏ 5 


Page Properties... 
A Font... 


r PUI 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


اأ بيخ أ ٭ » م 


LO Ma Cd 
من القائمة المختصرة كما بالشكل‎ "طypممrاink‎ 


۳- حدد صفحة الارتباط وهی index.php‏ کما بالشکل 


Insert Hyperlink 


Link ta: Text ta display: | ال تيسية‎ 
i | ۳ Dictionary | قا‎ | = 


rE Del_Term.php al O ) 
IIE 2 | desktop.ini 
__| ZÊ edit_term.php TargetFrame... 


Place in This | m header_links.php 


| Document LEI Lû Help.php -_ Parameters... 
Pages yp index.php : 
mH post.php 
Lreate New Recent | 0 reg.php 
Dacument 1 rm search_term.php 
| | rm signin.php 
jindex.php 


Ej 


1 
E-mail Address 


التدريب العملي السادس "إنشاء صفحة الاتصال بقواعد البيانات "connection.php‏ 

الهدف من النشاط: إنشاء صفحة ويب تحقق الاتصال بقاعدة البيانات. 

إضافة مصطلح أو تعديل بياناته أو البحث عنه أو حذف مصطلح من قاعدة البيانات» الأمر الذي 
يتطلب منا فتح اتصال بقاعدة البيانات حتى يتسنى لنا إجراء هذه العمليات على بيانات جدول 
قاعدة البيانات. 


المطلوب: إنشاء صفحة ويب جديدة تحتوي على الكود التالي: 


(۳۲- ۲( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


1 <?php 

/ $username="root"; 
$password=""; 
$database="dbdictionary"; 
$server="localhost"; 


$connectbtmysql connect("$server","$username","$password"); 
if ($connect) 


$selectmysql select db("$database") or die("تانايبلا ;("هناك مشكلة فى قاعدة‎ 
} 
else 


1 
:"لم يتم الاتصال بقاعدة البياناث")0طءع 
} 


)۲ ۲( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


الوحدة الثالثة 


إنشاء صفحات موقع "قاموس مصطلحات الكمبيوتر المصور" 


(۳۶- ۲( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 
اسم النشاط: "إنشاء صفحة إدخال مصطلح "Add_term.php‏ 
الهدف من النشاط: إدخال مصطلح في قاعدة البيانات من خلال صفحة ويب. 


وصف النشاط: يمكن استخدام صفحة الويب كواجهة للتعامل مع جدول قاعدة البيانات لإضافة 


استعن بالشاشة التالية ی ادخال کرد P5٣٥‏ في الأماكن المشار إليها لإنشاء صفحة ويب 
a‏ في إدخال 5 طلح إلى جدول قاعدة البيانات. 


(C: xampp‏ ادخال مصطلح للقاموس 


File Edit View Insert Format Tools Table Site Data View Panels Window Help 
B-EIS-HIBBS~ 


Site View header.php connection.php input_term_terms.php* x input_term.php 


xoqIO00 1 


35 sep|o4 


<html dir="rt]"> 


Sites alae lal EES إدخال كود صفحه‎ ١ 
Li</head> ت ت‎ 
<body dir="rt]1"> 


s24 a26eueN s25 Addy 


<div style="text-align:center" > <h1>حlطbþصa‎ Jlzدإ</h1></div>‎ 
SJ <form method="post" action="input term terms.php" enctype="multipart/form-data"> 
<div class="style2"> 
DE J> 
1 
anbsp; “nbsp; anbsp; 
<input name="txt term" type="text" style="width: 482px" class="style4” 
<br /> 
ترجمنتة‎ 
anbsp; «nbsp; «nbsp; «nbsp; «nbsp; «nbsp; 
<input name="trans" types"text" style="width: 482px" class="style4".,/> <BE./> 
<br /> 


saqızadold <55) salpadoıd 6e1 


تعريق 
anbsp; «nbsp; «nbsp; &nbsp; «nbsp; «nbsp;‏ 
<textarea name="TextAreal" style="width: 480px; height: 30px"></textarea> <br />‏ 
COT J>‏ 

ا الصورة 

anbsp; anbsp; 

<input name="File1l" 


۲۔ إضاقة کود ٥ [٥‏ الخاص بالربط بقاعدة 
البيانات وإضافة مصطلح </body>‏ 


</html> 


Design Split 
Line 8, Column 1 1 ګ ع‎ - CSS21 1197x257 


| ص11:43 


EN > | » 
x A 0 Y-10/-2/) 


.16 2d6 لإضافة صفحة‎ ۴H4۲ كود‎ (١) 
<?php 


include("header.php"); 
F> 


(۲) إضافة كود P1۲‏ الخاص بتحقيق الاتصال بقاعدة البيانات وإضافة بيانات جدید. 


(۳° 5 ۲( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


<?php 
include("connecton.php"); 
ifisset(S POST['Submit1'])) 


i(1s_dir(pic')) { mkdirpie); j 
@Sfle=$_FILES['File1']['name'] ; 
@$tmp=$ FILES[File1'][tmp_name']; 
iflempty($file)) { move uploaded file($tmp,'pic/".$file); ? 
$term=$ POST[txt term']: 
$trans=$ POST['trans']; 
$defe=$ POST['TextAreal']; 
$picture="pic/" . $file." "; 
if ( Sterm I= "" && $trans !== "" && $defe !=— "" && !lempty($file) ) 
1 
mysql query("SET NAMES 'utf®'"); 
$query=mysql query( "insert into terms values(",'Sterm!, '$trans','$defe','$picture")"™); 
if( query) 


{ 
؟لوa۲عو="حاجنب ;"تم اضافة البباناث‎ 
echo("label id='Label1' style='color: #FF0000;font-size: x-large; $datares label "); 


ر 
else‏ 


echo("<label id='Label1' style='color: #FF0000;font-size: x-large; $datares </label "); 


echo("label id='Labell' style='color: #FFF0000;font-size: x-large; $datares </labe "); 


e-0‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 

اسم النشاط: "إنشاء صفحة البحث عن مصطح hpطSearch_term.p"‏ 

الهدف من النشاط: إنشاء صفحة ويب تستخدم في البحث عن مصطلح في قاعدة البيانات 
وعرض بياناته على صفحة الويب. 

وصف النشاط: استكمالاً لعملية إدخال مصطلح قد يرغب المستخدم في البحث عن مصطلح سبق 
تخزينه في قاعدة البيانات وعرضه على صفحة الويب. 


التالية: 


v~ IF8 133 Ke | W~ E~- css2.1 1198x391 v 


م 01:50 


> 4» 
EA O rao 


نافذة الكود كما يلي 


1 <html dir="'rtl"> 


2 <head> 
3 <meta content="text/ html; charset=utf-8" http-equiv="Content-Type" > 
4 
3 
6 
8 <p class="style1"><span lang="ar-eg"><strong> عن مصطلحج‎ ثحب-/strong<>/span<>/‎ p< 
9 <form method="post" action="search term.php'"™ 
10 <div > 
11 با ست‎ 
12 <input name="txt search" type="text" style="width: 332px; height: 25px;" > 
13 <input name="submit1" type="submit" value="nٹlكJllب "البح‎ style="height: 26px" >&nbsp;<br ><br> 
14 Jform>™ 
15 <br> 
16 <table style='width: 100%' border="1''> 
17 <tr> 
18 >< <ل)/> المصطلح‎ 
19 حل†/> الترجمة حل)>‎ 
20 حل)/> التعريف حل)>‎ 
21 <ل†/> الصورة حل‎ * 


</table> 


27 <html 


(٥۲ -۳۷(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


(۲) استخدم کود P۲3۲‏ رقم۱ 


<?php 
include("header.php"); 
include("connecton.php’ 


(۲) استخدم كود ۶3۲ رقم۲٠‏ والخاص بالبحث في قاعدة البيانات عن مصطلح معين. 


<?php 
ifisset($_POST['submit1'])) 


$txt search=$ POST[txt search']; 

mysql query("SET NAMES 'utfS'"); 

$sql"select * from terms where term like '%o$txt search%o' ORDER BY term ASC"; 
Squery=mysql query(Ssql) ; 

$num=mysql num rows($query): 

while($row=mysql fetch array($query)) 


$term=$row['term']; 
$trans=$row['trans']; 
$defe=$row['defe']; 
$picture=$row ['picture']; 
echo(" < 
<td $termT/tdz 
<tdz$transT/tdz 
<td $defectdz 
<td?<input name='pic' type='image' srec='$picture' width='80' helght='80' /2<Adz> 
ا‎ 


(۲۸- °۲( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


اسم النشاط: "إنشاء صفحة حذف مصطلح "Del term.php‏ 


الهدف من النشاط: حذف سجل من جدول قاعدة البيانات. 


Js a al O a E E 


قاعدة البيانات وذلك من خلال كود P3۲‏ الذي تم شرحه في الكتاب. 


)١(‏ استعن بالشاشة التالية في إدراج كود ۲13۲ في الأماكن المحددة على الشاشة إنشاء 


نح حذف الہ 


Toolbox 
vw HTML 
EEG 
BÊ <div> 
<span> 
کے‎ Break 
E Horizontal Line 
F Image 
# Inline Frame 
FF Layer 
([ Paragraph 
v Form Controls 
ET Advanced Button 
gj Drop-Down Box 
Form 
Group BOX 
EJ Input (Button) 
Input (Checkbox) 
gı Input (File) 
Input (Hidden) 


xam P0‏ حتف مصطح 4ا 


File Edit View Insert Format Tools Table Site Data View Panels Window Help 


ite View delete_term.php” > 


i<html dir="rt]"> 


KEE 
<اd<لسلسمئا>/‎ d< 
<td<><حلطصملا>/‎ d< 
<اd>aمaمجرتلا>/‎ d< 
<اd<قيرعتلا>/‎ d< 
*EQ>S jad C7 EQ> 


R-EHS-HIBE~ 


Folder List 
Î C:\xampp\htdocs\terms 
E Û images 
ı E up 
Pd connection.php 
2 
P3 header .php 
Pd Help.php 
A index.php 
Pd input_term.php 
P3 input_term_terms.php 
P reg.php 
Pd search_term.php 
Pd search_text.php 
P3 signin.php 
Pd signout.php 
Pd update_term.php 


Tag Proper... x< ; CSS Properties # x 


>] الصا ئص<ك‎ ></td> Apply... < Manage... # > 
EZS 
</table> 
Select CSS style to apply: 
</form> 
#:] </body> 
AI</html> 


11:32 ص‎ 
°“ Ye10/-/YY 


الجزء الأول: حيث يشير الرقم )١(‏ على الشاشة 


<?php 
ınclude("header.php"); 
include("connection.php"); 
mysql query("SET NAMES 'utf8'"); 
$sqll"select * from terms": 
Squery=mysql query($sqD; 
$num=mysql num rows($query); 


الجزء الثاني: حيث يشير الرقم (۲) على الشاشة 


(٥۲ -۳۹(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


<?php 

echo (" 

> [< عدد المصطلحات‎ $m z1: 
Ys 


الجزء الثالث: حيث يشير الرقم (۴) على الشاشة 


<?php 
while($row = mysql fetch array($query)) 


{ 

$id=$row["id']; 

$term=$row ['termn']; 

$trans=$row ['trans']; 

$defe=$row['defe"]; 

$picture=$row ['picture"]; 

echo (" 

r > 

<td $id</tdz 

<td $termT</tdz 

<td $trans</tdz 

<tdz$defe</tdz 

<tdZ<input name='termp' type='image' srec='$picture' width='80' height='30' </td> 

<tdz>=<a href'del term.php?id=$id'> ڪذزف‎ </a></td> 
at 


الجزء الرابع: حيث يشير الرقم )٤(‏ على الشاشة 


<?php 
ifisset(S_GET[id'])) 


$sqldel="delete from terms where id='$ GET[id]'": 
Squery=mysql query(Ssqldel; 

header( "Location: Del Term.php"); 

exit: 


ا 


(٥۲ - ٩(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


اسم النشاط: إنشاء صفحة "تعديل بيانات مصطلْح م nاn.p "Edit ter‏ 


الهدف من النشاط: تعديل بيانات في جدول قاعدة البيانات. 
وصف النشاط: استخدام الشاشتين التاليتين في إنشاء صفحة تعديل بيانات مصطلح: 


[7| تحنبت للج‎ )C\xampp_new\htdocMerms\update_term.php) - Microsoft Expression Web 4 ww e n ا0 ا‎ 
File Edt View jnserft Fomat Tools Table Şe Data View Panel Nindow Hel 


1 <html dir="rtl'"> 


<head> 
<meta content="texthtml; charset=utf-8" lttp-equiv="Content-Type" 
> تحدیث مصطلح <ع][)‎ >1< 


6 <body> ۱ رقم‎ P3۶٣ کود‎ 
1 <!-- php code number 1] --> 


7 
ک 


3 <اطل <م/> تعديل مصطلح < و<إط»‎ 
9 <!-- php code number 2 --> 
10 e method="post" action="edit term.php"™ 1 رقم‎ PHP ود‎ 
11 <!-- php code number 3 -> 
12 <table style="width: 100%0"> 
13 <tr bgcolor='#3FffOO'> ۲ رقم‎ P٥3۶٥ کود‎ 
14 >] <ل)/>المسلسل حل‎ 
15 >] <ل]/>المصطلح حل‎ 
16 <ل/=الترجمةحل]>‎ 
17 >] /=التعر بقح‎ < 
18 2] ل ]/الصور ة<ل‎ ٤ ر قم‎ P3۶٣ کرد‎ 
19 >) <الخصاتص حل‎ < 
20 <r : 
21 <!-- php code number 4 -> 
22 </table> ٥ہ ر قہ‎ P]٣٥ کود‎ 
23 <!-- php code number 5 --> 
24 <form 
25 <form En pot actionr'edit term.phpîid=$ GETlid]&amp:action=$ GET [acton]' enctype="multipart'form-data"™ 
26 1 
2 تعدیل بتك حر‎ <ho> 
28 <hr style='color:orange:maroon;width:1267px' 
29 <div > 
30 <!-- php code number 6 -> 
31 
32 <!- php code number 7 -> 
33 
34 <divz 
35 <form 
36 <body> 
37 <htimlë 


(٥۲ - ٤۱(‏ الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 
المطلوب: 
)١(‏ استخدم الكود التالي في الأماكن المحددة بالشاشة السابقة: 


الجزء الأول: حيث يشير الرقم )١(‏ إلى مكان إضافة الكود التالي بعد <رdه8>‏ 


<?php 
include("header.php"); 
e 
إلى مكان إضافة الكود التالي قبل < إه۴>‎ )١( الجزء الثاني: حيث يشير الرقم‎ 
<?php 
include( "connection. 


mysql query("SET NAMES '‘utfS'"); 
$sql="select * from terms": 
Squery=mysql query($sqD; 
$num=mysql num rows($query): 
r 


الجزء الثالث: حيث يشير الرقم (۴) إلى مكان إضافة الكود التالي بعد <صإإه۴> 


<?php 
echo) ">1< عدد المصطلحات‎ $رum‎ >1<"; 


الجزء الرابع: حيث يشير الرقم )٤(‏ إلى مكان إضافة الكود التالي قبل إغلاق الجدول 
.</table>‏ 


<?php 
while($row = mysql fetch array($query)) 


1 
$id=$row["id']; 
$term=$row ['term']; 
$trans=$row ['trans']; 
$defe=$row['defe']; 
$picture=$row['picture"]; 
echo (" 
<r > 
<td $id <td> 
<tdz$termT/tdz 
<td $trans</tdz> 
<td $defe</tdz 
<tdz <input name='termp' type='image' src='$picture' width='80"' height='80' /<tdz 
<td> <a href'update term.php?id=$id' > Jıدعîx/a>‎ </td> 
<tr 
J) 


)£=( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 
الجزء الخامس: حيث يشير الرقم )١(‏ إلى مكان إضافة الكود التالي بعد إغلاق الجدول 
.</table>‏ 


<?php 

ifisset(S_ GET['d'])) 

1 

$sql"select * from terms where id='$ GET[id]'": 


squery=mysql query($sqD; 
$row=mysql fetch array($query); 
$id=$row|['id']; 

$term=$row ['term']; 

$trans=$row ['trans']; 
$defe=$row['defe']; 
$picture=$row[ "picture" ]; 


الجزء السادس: حيث يشير الرقم )١(‏ إلى مكان إضافة الكود التالي قبل إغلاق اد <حصإه۴/>. 


<?php 

echo(" 

<br f 

<input name='iddata' type='hidden' style='width: 482px' value='$id' > 
المصطلح‎ nbsp: & nbsp: nbsp: 
<input name='txt term' type='text' style="width: 482px' value='$term' > <br f 
<br 
جمنة‎ j&knbsp;:&nbsp:&nbsp:; 
<input name='trans' type='text' style="width: 482px' value='$trans' > <br 
<br 
فیرعeت‎ ten sp:& nbsp: sp; 
<br 

nbsp: &enbsp:‏ االصورة 

<input name='pic' type='hidden' style="width: 482px' value='$picture' /* 


<input name='filedata' type='file' maxlength='43'> 
<br /2<br <br <br f 
<input name='Submit2' style="width: 76px' type='submit' value='ûdlض|'‎ ><br /> 
<br 2 
9 
7 
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كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


الجزء السابع: حيث يشير الرقم (۷) إلى مكان إضافة الكود التالي قبل إغلاق الد <> ٠‏ 


<?php 
ifisset(S POST{['Submit2'])) 


if(is_dir('pic)){ mkdir(pic); } 
$fileName = $ FILES[ 'filedata']['name']; 
$tmpName = $ FILES['filedata']['tmp_name']; 
if(!empty($fileName)){ move _ uploaded file($tmpName,'pic/'.$fileName); ¢} 
$iddata=$ POST['iddata']; 
$terma=$ POST['txt term']; 
$transa=$ POST['trans']; 
$defea=$ POST['TextArea1']; 
$pic=$ POSTI['pic']; 
iff!empty($fileName)) { 
$picturea="pic/" . $fileName . " "; 
else { 
$picturea= $pic ; 
mysql _query("SET NAMES 'utfS'"); 
$sql="update terms set term='$terma',trans='$transa' ,defe='$defea' ,picture='$picturea' where id='$iddata' "; 
$query=mysql query($sqD; 
if($query) 
header("Location: update term.php"); 
exit; } 


اسم النشاط: "إنشاء صفحة المساعدة "Help.php‏ 
الهدف من النشاط: تحديد العناصر الل یمکن عرضهھا کی صفحة المساعدة. 
وصف النشاط. في معظم مواقع الويب نجد ارتباط مساعدة لمستخدمي الموقع» تمدهم بمعلو مات 


5 TEQ 
4® LIepPy 
و‎ 


لر تبسبة آدخال مصطلہ بحث عن مصطلہ تعدبل ۔ حذف مصطلہ مساعدة تسجبل الخر و < مرحبا بکم نله 


localhost/terms/Help.php Û | O و‎ 


المساعدة 


استخدم المهارات والمعارف التي اكتسبتها في إنشاء صفحات الموقع» ومهارت البحث 
عبر الإنترنت في الاطلاع على صفحات المساعدة في بعض المواقع لتنفيذ ما يلي: 


e الغرض من صفحة المساعدة هو:‎ )١( 


)۲( العناصر ل يندرج تحتها معلومات صفحة المساعدة هي.٠‏ 


)۲( استخدہ احدی اأتطبيقات في إنشاء صفحة المساعدة باسم «‘"Help"‏ بحبث يظهر بها 
Banner؛‏ ويكون لها عنوان وتحتوي على كافة البيانات الضرورية المراد عرضها 
لمستخدم الموقع. 
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كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


٤٥(‏ - ۲( الصف الثاني الثانوي 


كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


الوحدة الرابعة 


تأمين موقع ويب 
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كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


اسم النشاط: "طرق اختراق مواقع الإنترنت التي يجب تجنبها" 


هدف النشاط: التعرف على أساليب اختراق مواقع الإنترنت حتى يمكن البحث عنها خلال 
الإنترنت ومعرفة أفضل الطرق لتجنبها. 


وصف النشاط: التعرف على أساليب الاختراق 
المطلوب: اكمال العبارات بالمفهوم العلمي المناسب مما يلي: 
SQL Injection - SSL (Secure Sockets Layer) - OpenVAS‏ — 
MDS - XSS ( Cross Site scripting )‏ 


2 ------- يمكن أن يحدث عن طريق اإدخال المخترق لكود جافا سكريبت امأا٥؟S‏ ۷2ول 
وعند إرسال التعليق إلى الخادم 56۷8٣‏ يخزن هذا الكود في قاعدة البيانات وعند عرضه في 
صفحة ا" يتم تنفيذ هذا الكود والذي ربما يعيد توجيه المستخدم إلى صفحة أخرى ذات 


1 ----- يعتبر من أكثر التطبيقات مفتوحة المصدر استخدامًا لاختبار أمان الموقع. 

٣‏ ------- هو بروتوكول لتأكيد التعامل الآمن بين خادم الويب 56۲۷6۲ ۷66 ومستعرض 
الإنترنت ۷e٥ 8٥W se۲‏ عن طریق تو سیط طرف ژlائلث‏ ڍږم٬ى Certificate Authority‏ 
.(CA),‏ 

٤‏ -------- يمكن أن يتم عن طريق إدخال المخترق لجملة 5۵1 بدلا من إدخال اسم المستخدم 
بهدف إحداث تعديلات غير مرغوبة بالجداول. 

° ------ أحد أساليب تشفير البيانات المتاحة في لغة 4۲ ۴. 
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كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 

اسم النشاط: "استخدام G٤‏ و ۴051" عند إنشاء موذج بيانات. 

هدف النشاط: التعرف على الفرق بین 6٤1‏ و 1آ؟۴0 من خلال تدريب عملي. 

وصف النشاط: )١(‏ فتح صفحة و8۴ للتعديل - تعديل طريقة ارسال البیانات إلى آ٤‏ بدلا 


من ۴08 ومعاينة النتيجة بمستعرض الإنترنت. 
المطلوب 
© افتح صفحة مم.وه۲ للتعديل. 


.GET Jll Method غير قيمة الخاصية‎ ٠ 

.reg.مطpم احفظ صفحۂ‎ ٠ 

هم حمل الصفحة مطم.وهء من خلال مستعرض الإنترنت بكتابة العنوان 
http: //ا|‌calhost/ terms / reg. php‏ في مستعرض الإنترنت. 


N OG 
انقر زر تسجیل.‎ 


ه لاحظ عنوان الا في شريط عنوان الموقع: 


| http://localhost/terms/reg.php?bt_user=ahmed&tbt_pass=moon&tbct_con=moon8&Submitl= %D8 %AA%D8 %83 %DE 4A 


ستجد جميع بيانات النموذج واضحة في عنوان ا۸ل خلال طلب م٤٤‏ وتشير الأرقام 
کی اک ال 


< قيمة عنصر التحكم لمربع النص ۲٥ں‏ _)» (اسم المستخدم). 

۲ قيمة عنصر التحكم لمربع النص ءءهم_ا») (كلمة المرور). 

۳ قيمة عنصر التحكم لمربع النص )»_-٠٥١‏ (تاكيد كلمة المرور). 
لاحظ ظهور كلمة المرور بشكل واضح جدا في عنوان ال. 


غير مرة أخرى قيمة الخاصیية 4٥۸٤مص‏ إلی ۴051 ثم کرر ما سبقء لن تجد بیانات 
من الواضح جا آنه یجب استخدام أسلوب ۴0581 بدلا من 6٤١‏ وذلك لغرض التأمين. 
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كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


اسم النشاط: التعلم الذاتي "لتشفير البيانات" 


ا ر ا ا ف ا ت ف الض ل کے كد ورک ار ا 
M5‏ لتشفير البيانات. 


وصف النشاط: استخدام الإنترنت لتوظيف مهارات البحث لديك للوصول إلى كود لتشفير 
البيانات باستخدام دالة 155[ 


المطلوب: املأ الجدول التالي مستعيدًا بنتائج البحث في الإنترنت: 


الكلمة/الكلمات الدليلية التي استخدمتها في 
البحث عن اأکود Key Words‏ 


الكود الذي درست»› والكود الذي 
حصلت عليه 
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كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


اسم النشاط: ابدا من حیث انتھی الاخرون لتنفیذ کود ۴۳۲ من الإنترنت 

هدف النشاط: توظيف مهارات البحث في الإنترنت في الحصول على كود وتنفيذه 
وصف النشاط: امكانية البحث عن كود 4۴[ من خلال الإنترنت» وتنفيذه. 
المطلوب: بفرض الحصول على نتيجة البحث التالية 


PHF md5() Function - W3S5chools 

WS Choos _ com php func_sSiringqg_ mad asp‏ ۰ تر جم جذد الصقحدة 

The MDS algorithm is intended for digital signature applications, where 
a large Îlle must be "compressed" In a secure manner before belnq 
encrypted with a ... 


بالدخول إلى هذه الصفحة تم الحصول على الأكواد التالية وناتج تنفيذها: 
الكود الأول: 


PHP Source: Result: 


<! DOCTYPE html> Sb1a9953c4611296a827abf8c47804d7 


<html> 
<body> 


<?php 
Şstr = "Hello"; 
echo md5 ($str) ; 


2< 


</body> 
TIHEM 
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كراسة الأنشطة والتدريبات العملية في مادة تكنولوجيا المعلومات والاتصالات 


الكود الثانى 


PHP Source: Result: 
<!DOCTIPE html? The string: Hello 
4HIEML? 


TRUE - Raw 16 character binary format: (™MSAÃa-"«gÃxx 
FALSE - 32 character hex number: 

<?php 8b1a9953c4611296a827abfSc47804d7 

Sstr = "Hello"; 

echo "The string: ".$str. "br"; 

echo "TRUE - Raw 16 character binary format: 

" .mû5 (SsEr, TRUE} . "<br?"z 


<hodyz 


echo "FALSE - 32 character hex number: 
" .mû5 {Sstr} . "<br"; 
جر‎ 


من الواضح أن دالة 155 يمكن أن تشفر النص إلى اكثر من شكل 


MDS5(string,raw) 


قيمة وسيط الدالة سج ناتج الدالة 
١‏ رمز في شکل 8i‏ 


۲ رمز في شکJل‏ ساد عر Hex Number‏ 
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